<template>
  <div class="result_div">
    <head-top head-title="网络结果公示" go-back="true"></head-top>
    <div class="result_box">

     <!--选举-->
      <div class="result_ul" v-if="resultList.can">
        <div class="ul_div" @click="goCanTips(can.id)" v-for="(can,cindex) in resultList.can" :key="cindex">
          <div class="result_l">
            <img src="./images/tips_icon@2x.png" alt="">
          </div>
          <div class="result_c">
            <p>{{can.title}}</p>
          </div>
          <div class="result_r">
            <img src="./images/back@2x.png" alt="">
          </div>
        </div>
      </div>

      <!--事物-->
      <div class="result_ul" v-if="resultList.sup">
        <div class="ul_div" @click="goSupTips(sup.id)" v-for="(sup,sindex) in resultList.sup" :key="sindex">
          <div class="result_l">
            <img src="./images/tips_icon@2x.png" alt="">
          </div>
          <div class="result_c">
            <p>{{sup.title}}</p>
          </div>
          <div class="result_r">
            <img src="./images/back@2x.png" alt="">
          </div>
        </div>
      </div>

      <!--满意度-->
      <div class="result_ul" v-if="resultList.sat">
        <div class="ul_div" @click="goSatTips(sat.id)" v-for="(sat,aindex) in resultList.sat" :key="aindex">
          <div class="result_l">
            <img src="./images/tips_icon@2x.png" alt="">
          </div>
          <div class="result_c">
            <p>{{sat.title}}</p>
          </div>
          <div class="result_r">
            <img src="./images/back@2x.png" alt="">
          </div>
        </div>
      </div>

      <!--判断是不是业主-->
      <div class="no_info_div" v-if="statusNum === 0">
        <p>未在<span>{{loadTitle}}</span>找到您的业主信息</p>
        <p>请进行<span>业主变更</span>或<span>切换到您的小区</span></p>
        <button @click="goIdent">前往业主变更</button>
      </div>

      <!--暂无数据-->
      <div class="default1" v-if="resultList.can === '' && resultList.sup ==='' && resultList.sat === '' && noFlag">
        <p>抱歉！暂无数据</p>
      </div>

      <!--状态400-->
      <div class="default" v-if="codeNumber === 400">
        <p>{{erroText}}</p>
      </div>

    </div>
  </div>
</template>

<script>
  import headTop from '../header/Header'
  import {getMangers} from '../../api/management'
  import {loadTitle} from '../../common/js/cache'
  import {resultList} from '../../api/homeLogin'

  export default {
    name: 'Letter',
    data() {
      return {
        statusNum: '', // 是否是业主或管理员状态码
        vallageTitle: loadTitle(), // 小区名
        noFlag: false, // 判断有无数据的显示
        resultList: [], // 列表数据
        codeNumber: '', // 列表code
        erroText: '' // 错误信息展示
      }
    },
    created() {
      this._getMangers()
    },
    methods: {
      // 判断是否是业主或管理员
      _getMangers () {
        getMangers().then(res => {
          if (res.code === 200) {
            this.statusNum = res.data.status
            if (this.statusNum !== 0) {
              // 数据列表
              this.getResultList()
            }
          }
        })
      },
      // 前往业主变更
      goIdent() {
        this.$router.push('/my/Ident')
      },
      // 列表数据
      getResultList() {
        resultList().then(res => {
          if (res.code === 200) {
            this.resultList = res.data
            // console.log(this.resultList)
            if (this.resultList.sup === '' && this.resultList.can === '' && this.resultList.sat === '') {
              this.noFlag = true
            } else {
              this.noFlag = false
            }
          }
          if (res.code === 400) {
            this.codeNumber = res.code
            this.errorText = res.error
          }
        })
      },
      // 去到选举公示
      goCanTips (id) {
        this.$router.push('/CanTips/' + id)
      },
      // 去到事物公示
      goSupTips (id) {
        this.$router.push('/SupTips/' + id)
      },
      // 去到满意度公示
      goSatTips (id) {
        this.$router.push('/SatTips/' + id)
      }
    },
    components: {
      headTop
    }
  }
</script>

<style lang="scss" scoped>
.result_div{
  width: 100%;
  padding-top: 40px;
  .result_box{
    width: 100%;
    .result_ul{
      padding: 10px;
      .ul_div{
        box-shadow: 1px 1px 4px #888888;
        border-radius: 5px;
        display: inline-flex;
        justify-content: space-between;
        width: 100%;
        align-items: center;
        margin-bottom: 10px;
        .result_l{
          width: 80px;
          height: 80px;
          flex: 0 0 80px;
          text-align: center;
          img{
            width: 100%;
            height: 100%;
          }
        }
        .result_c{
          flex: 1;
          padding-left: 5px;
          padding-right: 10px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2;
          -webkit-box-orient: vertical;
          p{
            font-size: 14px;
            color: #333333;
            line-height: 22px;
          }
        }
        .result_r{
          padding-right: 5px;
          img{
            width: 10px;
          }
        }
      }
    }
    .no_info_div {
      padding: 200px 10px 0px 10px;
      text-align: center;
      font-size: 16px;
      p {
        line-height: 40px;
        span {
          color: #ff0000;
        }
      }
      button {
        width: 60%;
        background-color: #047bda;
        border-radius: 50px;
        font-size: 15px;
        color: #FFFFFF;
        padding: 10px 0 10px 0;
        border: none;
        outline: none;
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 140px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 180px;
      }
    }
    .default {
      width: 100%;
      flex: 1;
      display: inline-flex;
      justify-content: center;
      align-items: center;
      padding-bottom: 140px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 180px;
      }
    }
  }
}
</style>
